<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
</body>

<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo 1' },
                { message: 'Bar 2' }
            ]
        }
    })
    /* 这个是变异方法，直接改变数组本身。*/
    example1.items.push({ message: 'Baz 3' });

    //变异方法，顾名思义，会改变调用了这些方法的原始数组。
    //相比之下，也有非变异 (non-mutating method) 方法，
    //例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
    example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
    })

    //注意事项，由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
    //第1类问题.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    //第2类问题.当你修改数组的长度时，例如：vm.items.length = newLength

    var vm = new Vue({
        data: {
            items: ['a', 'b', 'c']
        }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

    /* 解決第一类问题 */
    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    vm.$set(vm.items, indexOfItem, newValue)

    /* 解决第二类问题 */
    vm.items.splice(newLength)

</script>

</html>